<template>
	<view class="content">
		<view class="text-area">
			<up-search placeholder="搜索" bg-color="#e3e3e3" v-model="keyword"></up-search>
			<!-- 轮播 -->
			<view class="banner">
				<up-swiper
					radius="8"
					height="160"
					:autoplay="true"
					show-title="true"
					v-if="bannerList.length"
					keyName="image"
					:list="bannerList"
				></up-swiper>	
			</view>
			<!-- 公告 -->
			<view class="notice-bar">
			  <up-notice-bar 
				text="示例数据"></up-notice-bar>
			</view>
			<!-- 瀑布 -->
			<view class="list">
				<up-waterfall v-model="flowList" ref="uWaterfallRef">
					<template v-slot:left="{leftList}">
						<view class="demo-water" v-for="(item, index) in leftList" :key="item.id" @click="goDetail(item)">
							<up-lazy-load threshold="-150" border-radius="10" :image="item.img" :index="item.id"></up-lazy-load>
							<view class="demo-title">
								{{item.title}}
							</view>
							<view class="demo-date">
								{{item.times}}
							</view>
							<view class="demo-tag">
								<view class="demo-tag-owner">
									{{item.tag[0]}}
								</view>
								<view class="demo-tag-text">
									{{item.tag[1]}}
								</view>
							</view>
							<view class="isDot" v-if="item.dot">
								{{item.isDot}}
							</view>
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="demo-water" v-for="(item, index) in rightList" :key="index">
							<up-lazy-load threshold="-450" border-radius="10" :image="item.img" :index="item.id"></up-lazy-load>
							<view class="demo-title">
								{{item.title}}
							</view>
							<view class="demo-date">
								{{item.times}}
							</view>
							<view class="demo-tag">
								<view class="demo-tag-owner">
									{{item.tag[0]}}
								</view>
								<view class="demo-tag-text">
									{{item.tag[1]}}
								</view>
							</view>
							<view class="isDot" v-if="item.dot">
								{{item.isDot}}
							</view>
						</view>
					</template>
				</up-waterfall>
			</view>
		</view>
		<!-- 返回顶部 -->
		<view class="top-class" v-if="showTopButton" @click="toTop">
			<up-icon name="arrow-upward" color="#fff" size="28"></up-icon>
		</view>
	</view>
</template>

<script setup>
	import { getBanner, getFlow } from '../../api/api';
	import { onLoad, onReachBottom, onPageScroll } from '@dcloudio/uni-app'
	import { ref, reactive } from 'vue'
	
	//banner数据
	const keyword = ref('')
	const bannerList = ref([])
	onLoad(()=>{
		getBanner().then(res=>{
			bannerList.value = res.bannerList
			console.log(res)
		})
		getFlow().then(res=>{
			flowList.value = res
			console.log(res)
		})
	})
	
	//瀑布流数据
	const flowList = ref([])
	// onLoad(async()=>{
	// 	const flowListTemp = await getFlow()
	// 	flowList.value = flowListTemp
	// 	console.log(flowListTemp)
	// })
	
	//触底
	const timerId = ref(null)
	onReachBottom(()=>{
		clearTimeout(timerId.value)
		timerId.value = setTimeout(()=>{
			addRandomData()
		}, 500)
	})
	const addRandomData = ()=>{
		const newItems = []
		for (let i = 0; i < 10; i++) {
			let index = Math.floor(Math.random() * flowList.value.length)
			let item = JSON.parse(JSON.stringify(flowList.value[index]))
			item.id = Date.now() + '_' + Math.random().toString(36).substr(2, 9)
			newItems.push(item)
		}
		// 一次性添加，减少响应式更新次数
		flowList.value.push(...newItems)
	}
	
	//回顶
	const showTopButton = ref(false)
	onPageScroll((e)=>{
		if(e.scrollTop > 600){
			showTopButton.value = true
		}else{
			showTopButton.value = false
		}
	})
	const toTop = ()=>{
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 500
		})
	}
	
	//详情
	const goDetail = (item)=>{
		const can = JSON.stringify(item)
		uni.navigateTo({
			url: `/pages/detail/detail?item=${encodeURIComponent(can)}`
		})
	}
</script>

<style lang='scss' scoped>
	.content{
		box-sizing: border-box;
		padding: 20rpx 20rpx;
		.banner{
			margin-top: 20rpx;
		}
		.notice-bar{
			margin-top: 20rpx;
		}
		.list{
			margin-top: 20rpx;
			.demo-water{
				margin: 10rpx 10rpx 10rpx 0;
				background: #fff;
				border-radius: 16rpx;
				padding: 16rpx;
				position: relative;
			}
			.demo-title{
				font-size: 30rpx;
				margin-top: 10rpx;
				color: #303133
			}
			.demo-date{
				font-size: 24rpx;
				color: #777;
				margin-top: 10rpx;
			}
			.isDot{
				position: absolute;
				right: 20rpx;
				top: 20rpx;
				font-size: 16rpx;
				line-height: 24rpx;
				color: #fff;
				background-color: #ff0000;
				text-align: center;
				border-radius: 10rpx;
				padding: 4rpx 10rpx;
			}
			.demo-tag{
				display: flex;
				margin-top: 10rpx;
				.demo-tag-owner{
					border: 1px solid rgb(252, 163, 129);
					display: flex;
					font-size: 20rpx;
					align-items: center;
					padding: 4rpx 14rpx;
					border-radius: 50rpx;
				}
				.demo-tag-text{
					border: 1px solid #0af;
					color: #0af;
					margin-left: 20rpx;
					border-radius: 50rpx;
					padding: 4rpx 14rpx;
					font-size: 20rpx;
					display: flex;
					align-items: center;
				}
			}
		}
		.top-class{
			position: fixed;
			bottom: 120rpx;
			right: 30rpx;
			background-color: rgba(0,0,0,0.5);
			padding: 20rpx;
			width: 44rpx;
			height: 44rpx;
			border-radius: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

</style>
